<template>
  <view>
    <!-- 单位是B不是kb :max-size="5 * 1024 * 1024"-->
    <u-upload
      v-if="!fileList.length"
      class="mt"
      ref="upload"
      upload-text="上传照片"
      :action="action"
      @on-success="onSuccessUploaded"
      @on-remove="removeHandle"
      @on-error="errorHandle"
      :auto-upload="true"
      :max-size="5 * 1024 * 1024"
      :max-count="2"
      :file-list="fileList"
    >
    </u-upload>
  <view class="imageBox">
    <view class="pre-item" v-for="(item, index) in fileList" :key="index">
				<image 
        class="pre-item-image" 
        :src="item" 
        mode="aspectFill"
         @click="previewImage(index,item)"
        ></image>
			</view>
  </view>
  </view>
</template>


<script>
export default {
  props: {
    formObj: {
      type: Object,
    },
  },

  data() {
    return {
      action: "",
      filesArr: [],
      picList: [],
      fileList: [
					
				]
    };
  },

  mounted() {
    this.uploadObj = this.formObj;
    this.fileList = this.formObj.value
    this.action = this.$BASE_URL + "/api/upload";
  
  },

  methods: {
    onSuccessUploaded(value) {
      this.picList.push(value.url);
      var obj = {
        key: this.uploadObj.name,
        value: this.picList,
        type: "uploads",
      };

      console.log("成功---");
      console.log(obj);

      this.$emit("childFn", obj);
    },

    errorHandle(value) {
      console.log("--上传失败--");
    },
    removeHandle(index, lists, name) {
      this.filesArr = lists;
      this.picList = [];
      lists.map((item) => this.picList.push(item.response.url));

      var obj = {
        key: this.uploadObj.name,
        value: this.picList,
        type: "uploads",
      };
      this.$emit("childFn", obj);
    },

            previewImage(index,value) {
              console.log(value)
             

			uni.previewImage({
				current: index,
				urls: [value]
			});
		}
  },
};
</script>


<style lang="less" scoped>
.imageBox{
  display: flex;
  width: 100%;
 

  .pre-item-image{
  width: 150rpx;
  height: 150rpx;
  margin-right: 10px;
}

}

</style>